.all_pad{
    padding: 6em 0;
    @media (max-width: 1080px){
        padding: 4em 0;
    }
    @media (max-width: 568px){
        padding: 3em 0;
    }
}
h3.title, h2.title{
    text-align: center;
    font-size: 33px;
    color: #98cd23;
    text-transform: capitalize;
    span{
        display: block;
        width: 132px;
        height: 2px;
        background: #000;
        margin: 25px auto 0;
    }
}
.ab-grids{
    margin-top: 55px;
}
.ab-grid-img img{
    padding: 5px;
    box-shadow: 0px 0px 13px 0px #B7B7B7;
}
.ab-grid-img{
    @media (max-width: 991px){
        float: left;
        width: 25%;
        padding: 0 5px;
        margin: 0;
    }
    @media (max-width: 768px){
        float: left;
        width: 50%;
        padding: 0 15px;
    }
    @media (max-width: 568px){
        padding: 0 7px;
    }
    @media (max-width: 320px){
        float: left;
        width: 100%;
        padding: 0;
        margin: 0 0 25px;
    }

}
.img-top{
    @media (max-width: 768px){
        margin-top: 30px;
    }
    @media (max-width: 568px){
        margin-top: 18px;
    }
}
.ab-grid-right{
    @media (max-width: 991px){
        padding: 0;
        margin-top: 30px
    }
    @media (max-width: 320px){
        margin-top: 6px;
    }
     h2{
        font-size: 24px;
        color: #16A9EF;
        @media (max-width: 320px){
            font-size: 21px;
        }
    }
    p{
        color: #464646;
        line-height: 2.2em;
        margin: 19px 0;
        @media (max-width: 1080px){
            line-height: 2em;
            font-size: 14px;
        }
    }
    ul{
        margin: 0;
        padding: 0;
        li{
            display: block;
            line-height: 2.3em;
            color: #464646;
            @media (max-width: 1080px){
                line-height: 2.3em;
                color: #464646;
                font-size: 14px;
            }
            .glyphicon-ok:before{
                content: '√';
                // color: #98CD23;
            }
            span{
                font-size: 12px;
                color: #98CD23;
                margin-right: 16px;
                font-weight: 1500;
            }
            a{
                color: #464646;
                text-decoration: none;
            }
        }
    }
}




.gallery-grids{
    margin-top: 55px;
    .gallery-grid{
        padding: 5px 5px;
        box-shadow: 0px 0px 12px 0px #A5A5A5;
    }
    @media (max-width: 568px){
        margin-top: 35px;
    }
    @media (max-width: 375px){
        margin-top: 28px;
    }
    @media (max-width: 991px){
        .gallery-grids-left{
            padding: 0 7px;
        }
    }
    
    @media (max-width: 736px){
        .gallery-grids-left{
            padding: 0 0px;
            width: 63%;
            margin: 0 auto 30px;
        }
    }
    
    @media (max-width: 667px){
        .gallery-grids-left{
            width: 69%;
        }
    }
    
    @media (max-width: 600px){
        .gallery-grids-left{
            width: 76%;
        }
    }
    
    @media (max-width: 568px){
        .gallery-grids-left{
            width: 80%;
        }
    }
    
    @media (max-width: 480px){
        .gallery-grids-left{
            width: 94%;
        }
    }
    
    @media (max-width: 414px){
        .gallery-grids-left{
            width: 100%;
        }
    }
}
.pro-top{
    margin-top: 30px;
}
.effect-3 img{
    transition: 0.5s;
    position: relative;
    width: 100%;
    right: 0;
}
.port-7{
    width: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    overflow: hidden;
    &:hover .gal-desc{
        opacity: 1;
        transform: perspective(600px) rotateY(0deg);
        z-index: 99;
    }
    &:hover img{
        right: 50%;
    }
    .gal-desc{
        transform: perspective(600px) rotateY(-90deg);
        transform-origin: right center 0;
        width: 50%;
        position: absolute;
        left: auto;
        right: 0;
        top: 0;
        padding: 51px 30px 0;
        @media (max-width: 1080px){
            padding: 40px 13px 0;
        }
        @media (max-width: 991px){
            padding: 10px 5px 0;
        }
        @media (max-width: 736px){
            padding: 43px 14px 0;
        }
        @media (max-width: 414px){
            padding: 18px 10px 0;
        }
    }
    .gal-desc{
        opacity: 0;
        transition: 0.5s;
        color: #000;
        h4{
            color: #16A9EF;
            font-size: 24px;
            margin-bottom: 22px;
            @media (max-width: 991px){
                margin-bottom: 10px;
                font-size: 20px;
            }
            @media (max-width: 375px){
                margin-bottom: 6px;
            }
        }
        p{
            line-height: 2.2em;
            font-size: 15px;
            color: #464646;
            @media (max-width: 1080px){
                line-height: 2em;
                font-size: 14px;
            }
            @media (max-width: 384px){
                line-height: 1.8em;
            }
        }
    }
}